<template>
   <div >
            <div class="index-content" :style="{columnCount:`${getItemIndex}`,background:`${getItemBg}`}">
                <div v-for="(e,i) in iList.items" :key="i" style="background: white ;" @click="Todetail(e.product_id)">
                    
                        <img  class="index-img"   :src="e.img_url" alt="">
                        <!-- <img v-show="e.y" class="index-hidimg" :src="e.img_url" alt=""> -->
                        <div class="index-item-detail">
                       <div v-show="e.product_name" class="van-ellipsis name">{{e.product_name}}</div> 
                       <div v-show="e.product_brief" class="van-ellipsis brief">{{ e.product_brief }}</div>
                        <div  class="van-ellipsis price" v-show="e.show_price">￥{{ e.show_price }}<span v-show="e.show_price_qi">起</span></div>
                        </div>
                </div>
                    <p v-for="e in iList.items" :key="e.material_id" v-show="e.action_title" class="index-action-title">{{ e.action_title }} ></p>                   
            </div>
            <div class="divider_line" v-show="iList.line_color" :style="`background:${iList.line_color}`">&nbsp;</div>
        </div>
</template>

<script>
export default {
    props:['iList'],
    methods:{
      Todetail(a){
        if(a !== undefined){
           this.$router.push({
            path:`/productdetails/${a}`,
          })
        }
        }
    },

    computed:{
        getItemIndex(){
                 if(this.iList.items?this.iList.items[2]?.y:''){
                    return 2
                 }else{
                      return this.iList.items?.length
                 }
          
        },
        getItemBg(){
             if(!this.iList.bg_color){
               return "#ffffff"
             }else{
                 return this.iList.bg_color
             }
          
        },
     
    }
}
</script>

<style lang="scss" scoped>
    .index-content{
     height: auto;
      max-width: 100%;

    //  column-count: 5;
     column-fill: auto;
      column-gap: 1vw;
      position: relative;
      // background: white;
    //   justify-content: center;
      .index-img{
        height: auto;
        max-width: 100%;
        display: block;
      }
      .index-item-detail{
         width: 90%;
         margin: 0 auto;
         text-align: center;
         .name{
            font-size: 16px;
            margin-top: 2vw;
         }
         .brief{
            font-size: 12px;
            color: rgba(0,0,0,.54);
         }
         .price{
            color: #ea625b;
            font-size: 14px;
         }
      }
      .index-hidimg{
        position: absolute;
        bottom: 0;
        right: 0;
        height: auto;
        max-width: 80%;
      }
      .index-action-title{
        color: rgba(0,0,0,.6);
        text-align: center;
        // margin-bottom: 2vw;
      }
      .divider_line{
    width: 100%;
    line-height: 1.5vw;
}
}
</style>